<template>
	<view id="id">
		<image src="../../../static/bottom.png" id="cover"></image>
		<view id="change" @click="updateMine">
			<image src="../../../static/图片.png" style="width: 30rpx;height: 30rpx;"></image>
			<span style="font-size: 28rpx;color:grey;margin-left: 10rpx;">更改个人资料</span>
		</view>
		<view class="base">
			
		</view>
			<view class="total">
				<view class="head" id="name">
					<image src="../../../static/ashui.png" style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"></image>
					<span style="padding-left: 20rpx;font-size: 50rpx;">{{namee}}</span>
				</view>
				<view class="head" id="asset">
					<span style="padding-left: 20rpx;font-size: 35rpx;">我的资产</span>
					<view style="padding-left: 20rpx;font-size: 35rpx;">我的资产</view>
				</view>
				<view class="head" id="order">
					<span style="padding-left: 20rpx;font-size: 35rpx;">我的订单</span>
					<image @click="go_order" src="../../../static/order.png" style="width: 140rpx;height: 160rpx"></image>
				</view>
				<view class="head" id="func">
					<span style="padding-left: 20rpx;font-size: 35rpx;">我的功能</span>
					<view style="display: flex;flex-direction: column;justify-content: flex-start;">
						<view style="padding-right: 100rpx;margin-bottom: 20rpx;">
							<image @click="noFunction()" src="../../../static/myaddr.png" style="width: 100rpx;height: 100rpx;padding-right:80rpx ;"></image>
							<image @click="noFunction()" src="../../../static/积分商城.png" style="width: 100rpx;height: 100rpx;padding-right:50rpx ;"></image>
							<image @click="noFunction()" src="../../../static/积星有礼.png" style="width: 110rpx;height: 100rpx;padding-right:50rpx ;"></image>
						</view>
						<view style="width:600rpx;margin-top: -40rpx;">
							<span @click="noFunction()" style="font-size: 30rpx;width:100rpx;padding-right:50rpx ;">我的地址</span>
							<span @click="noFunction()" style="font-size: 30rpx;width:100rpx;padding-right:50rpx ;">积分商城</span>
							<span @click="noFunction()" style="font-size: 30rpx;width:100rpx;padding-right:50rpx ;">积星有礼</span>
						</view>
					</view>
				</view>
					<view style="display: flex;flex-direction: column;align-items: center;margin-top: 20rpx;">
						<image src="../../../static/ashui.png" style="width: 80rpx;height: 80rpx;border-radius: 100rpx;"></image>
						<span style="color:grey;font-size: 32rpx;">企迈提供技术支持</span>
					</view>
			</view>
			
			<view class="nav">
				<view class="item" @click="skipToShouye()">
					<image src="../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
					<span class="word">首页</span>
				</view>
				<view class="item" @click="skipToBuy()">
					<image src="../../../static/点单.png" class="pic"></image>
					<span class="word">点单</span>
				</view>
				<view class="item" @click="skipToMyOrder()">
					<image src="../../../static/订单.png" class="pic"></image>
					<span class="word">订单</span>
				</view>
				<view class="item" @click="skipToMine()">
					<image src="../../../static/我的.png" class="pic"></image>
					<span class="word">我的</span>
				</view>
			</view>
		<!-- <button @click="test(e)" style="z-index: 999;position: fixed;bottom: 200rpx;">test</button> -->
	</view>
</template>

<script>
	import  nav from "../navv/nav.js"
	export default {
		data() {
			return {
				namee:this.$store.getters.nickName
			}
		},
		
		methods: {
			test(e){
				
			},
			...nav,
			go_order(){
				uni.navigateTo({
					url:"../myorder/myorder"
				})
			},
			updateMine(){
				uni.navigateTo({
					url:"/pages/index/mine/updateMine/updateMine"
				})
			},
			noFunction(){
				uni.showToast({
					title:"暂时未开放！",
					icon:"error"
				})
			}
		}
	}
</script>

<style scoped>
	
	#cover{
		top: -20rpx;
		position: fixed;
		z-index: 0;
		width:750rpx;
		height: 580rpx;
	}
	#change{
		top: 150rpx;
		left:500rpx;
		width:200rpx;
		height: 90rpx;
		z-index: 4;
		position: fixed;
		background-color: white;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-width: 0.1rpx;
		border-color: #ededed;
		border-style: solid;
	}
	.base{
		top: 560rpx;
		width: 760rpx;
		height: 2000rpx;
		background-color: #f4f4f4;
		position: fixed;
		z-index: 0;
		
	}
	.total{
		margin-top: 380rpx;
		position: relative;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-content: center;
		align-items: center;
		width: 750rpx;
		height: 1380rpx;
		margin-bottom: 400rpx;
		padding-bottom:20%
		
		
		
	},
	#name{
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
	}
	#asset{
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		padding-left: 30rpx;
	}
	#order{
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		padding-left: 30rpx;
	}
	#func{
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		padding-left: 30rpx;
	}
	
	.head{
		display: flex;
		
		background-color: white;
		width: 650rpx;
		height: 280rpx;
		z-index: 3;
		border-radius: 20rpx;
		
	}
	span{
		color: black;
		
		
		z-index: 3;
	}
	.nav{
		display: flex;
		position: fixed;
		position: fixed;
		top:92%;
		background-color: white;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		border-top: 2rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #d0d0d0;
		z-index: 99;
	}
	.word{
		font-size: 25rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 65rpx;
		height:95rpx;
		padding: 5rpx;
	}
	.pic{
		width: 60rpx;
		height: 80rpx;
	}
</style>
